<!-- 表单 -->
<template>
	<!-- 表单 -->
	<view class="edit-form">

		<view class="" v-for="res in formData">
			<uni-forms-item v-if="itemShow(res)" :label="res.label" :required="roleType" >

				<view :class="res.type">
					<!-- 输入框 -->
					<uni-easyinput v-if="res.type === 'input'" v-model="res.value" :placeholder="'请输入' + res.label" />

					<!-- 数字输入框 -->
					<uni-easyinput v-if="res.type === 'inputNumber'" type="number" v-model="res.value"
						:placeholder="'请输入' + res.label" />

					<!-- 文本域 -->
					<uni-easyinput v-if="res.type === 'textarea'" type="textarea" v-model="res.value"
						:placeholder="'请输入' + res.label" />

					<!-- 日期选择 -->
					<view v-if="res.type === 'timeDate'" class="time" @click="dateTimeShow = true">{{res.value | dateText}}</view>
					<u-datetime-picker v-if="res.type === 'timeDate'" mode="date" :maxDate="new Date().getTime()"
						:minDate="minDate" :itemHeight="88" :show="dateTimeShow" :closeOnClickOverlay="true"
						@close="closeDateShow" @cancel="closeDateShow" @confirm="submitDateShow">
					</u-datetime-picker>

					<!-- 多选框 -->
					<uni-data-checkbox v-if="res.type === 'switch'" v-model="res.value" :localdata="sexs" />

				</view>
			</uni-forms-item>
		</view>


	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 角色，true是艺人，false是用户
			 */
			roleType: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				required: true, // 是否必填

				dateTimeShow: false, // 是否打开日期选择


				// 单选数据源
				sexs: [{
						text: '女',
						value: 2
					},
					{
						text: '男',
						value: 1
					}
				],


				// 表单信息
				formData: [{
						label: '昵称',
						name: 'nickName',
						value: '',
						type: 'input',
						status: 0, // 0是全部，1是艺人
					},
					{
						label: '生日',
						name: 'birthday',
						value: '',
						type: 'timeDate',
						status: 0, // 0是全部，1是艺人
					},
					{
						label: '性别',
						name: 'gender',
						value: 2,
						type: 'switch',
						status: 0, // 0是全部，1是艺人
					},


					{
						label: '年龄',
						name: 'age',
						value: '',
						type: 'inputNumber',
						status: 1, // 0是全部，1是艺人
					},

					{
						label: '身高',
						name: 'height',
						value: '',
						type: 'input',
						status: 1, // 0是全部，1是艺人
					},
					{
						label: '体重',
						name: 'weight',
						value: '',
						type: 'input',
						status: 1, // 0是全部，1是艺人
					},
					{
						label: '简介',
						name: 'signature',
						value: '',
						type: 'textarea',
						status: 1, // 0是全部，1是艺人
					},



				],







			};
		},

		computed: {
			/**
			 * 最小的时间
			 */
			minDate() {
				let time = new Date()

				let date = time.setFullYear(time.getFullYear() - 40)

				return date
			},


			/**
			 * 表单一项是否显示
			 */
			itemShow() {
				return (val) => {
					let str = false

					if (val.status === 0) {
						str = true
					}

					if (val.status === 1 && this.roleType) {
						str = true
					}

					return str;
				}
			},
		},

		watch: {
			formData: {
				handler() {
					this.$emit('submit', this.formData)
				},
				deep: true
			},
			
			
			data:{
				handler(){
					if(Object.keys(this.data).length>0){
						for(let key in this.data){
							
							this.formData.forEach((res,index)=>{
								if(key === res.name){
									
									if(key === 'birthday'){
										this.formData[index].value = this.data[key] === null ? '' : new Date(this.data[key]).getTime()
									}
									
									this.formData[index].value = this.data[key] === null ? '' : this.data[key]
								}
							})
							
						}
						
						
					}
				},
				deep:true,
				immediate:true
			}
		},
		filters: {
			/**
			 * 时间显示文字
			 */
			dateText(val) {
				if (val === "") {
					return '生日信息提交后将不可更改'
				} else {
					let time = val.split("-")
					return time[0] + '年' + time[1] + '月' + time[2] + '日'
				}

			}
		},


		methods: {



			/**
			 * 时间选择确定
			 */
			submitDateShow(e) {
				let time = new Date(e.value)
				let nian = time.getFullYear()
				let yue = time.getMonth()+1
				let ri = time.getDate()

				let time4 = `${nian}-${yue>9?yue: '0'+yue}-${ri>9?ri:'0'+ri}`
				
				console.log(e.value, '22222222',time4);

				this.formData.map(res => {
					if (res.name === 'birthday') {
						res.value = time4
					}
				})

				// 关闭弹窗
				this.closeDateShow()
			},

			/**
			 * 关闭时间选择
			 */
			closeDateShow() {
				this.dateTimeShow = false
			},



		}

	}
</script>

<style lang="less" scoped>
	.edit-form {


		.timeDate {
			height: 100%;

			.time {
				#font(24rpx, #999, -, Microsoft YaHei);
				#flex(-, -, center);
				#box(-, 100%, 8rpx);
				padding-left: 24rpx;
				border: 2rpx solid rgb(229, 229, 229);
			}
		}


	}
</style>